@namespace url("http://www.w3.org/1999/xhtml");
@namespace ui url("http://www.w3.org/1999/xhtml");


/* FOCUS */


ui|clickbutton.focused table.matrix,
ui|clickbutton.default table.matrix {
	#alphabackdrop: url("${skin}/buttons/vista/clickbutton-focus-backdrop.png");
	background-repeat: repeat-x;
	background-position: 0 50%;
}

ui|clickbutton.focused table.matrix td.n,
ui|clickbutton.default table.matrix td.n {
	#alphabackdrop: url("${skin}/buttons/vista/clickbutton-focus-n.png");
	#region default
		#alphabackdrop: url("${skin}/buttons/clickbutton-focus-n.png");	
	#endregion
}
ui|clickbutton.focused table.matrix td.s,
ui|clickbutton.default table.matrix td.s {
	#alphabackdrop: url("${skin}/buttons/vista/clickbutton-focus-s.png");
	#region default
		#alphabackdrop: url("${skin}/buttons/clickbutton-focus-s.png");
	#endregion
}
ui|clickbutton.focused table.matrix td.e,
ui|clickbutton.default table.matrix td.e {
	#alphabackdrop: url("${skin}/buttons/vista/clickbutton-focus-e.png");
	#region default
		#alphabackdrop: url("${skin}/buttons/clickbutton-focus-e.png");	
	#endregion
}
ui|clickbutton.focused table.matrix td.w,
ui|clickbutton.default table.matrix td.w {
	#alphabackdrop: url("${skin}/buttons/vista/clickbutton-focus-w.png");
	#region default
		#alphabackdrop: url("${skin}/buttons/clickbutton-focus-w.png");
	#endregion
}
ui|clickbutton.focused table.matrix td.ne,
ui|clickbutton.default table.matrix td.ne {
	#alphabackdrop: url("${skin}/buttons/vista/clickbutton-focus-ne.png");
	#region default
		#alphabackdrop: url("${skin}/buttons/clickbutton-focus-ne.png");
	#endregion
}
ui|clickbutton.focused table.matrix td.nw,
ui|clickbutton.default table.matrix td.nw {
	#alphabackdrop: url("${skin}/buttons/vista/clickbutton-focus-nw.png");
	#region default
		#alphabackdrop: url("${skin}/buttons/clickbutton-focus-nw.png");
	#endregion
}
ui|clickbutton.focused table.matrix td.se,
ui|clickbutton.default table.matrix td.se {
	#alphabackdrop: url("${skin}/buttons/vista/clickbutton-focus-se.png");
	#region default
		#alphabackdrop: url("${skin}/buttons/clickbutton-focus-se.png");	
	#endregion
}
ui|clickbutton.focused table.matrix td.sw,
ui|clickbutton.default table.matrix td.sw {
	#alphabackdrop: url("${skin}/buttons/vista/clickbutton-focus-sw.png");
	#region default
		#alphabackdrop: url("${skin}/buttons/clickbutton-focus-sw.png");	
	#endregion
}


/* HOVER */

#region vista
	ui|clickbutton.hover table.matrix {
		#alphabackdrop: url("${skin}/buttons/vista/clickbutton-focus-backdrop.png");
		background-repeat: repeat-x;
		background-position: 0 50%;
	}
#endregion

#region osx
	ui|clickbutton.hover table.matrix {
		#alphabackdrop: url("${skin}/buttons/vista/clickbutton-focus-backdrop.png");
		background-repeat: repeat-x;
		background-position: 0 50%;
	}
#endregion

ui|clickbutton.hover table.matrix td.n {
	#alphabackdrop: url("${skin}/buttons/vista/clickbutton-focus-n.png");
	#region default
		#alphabackdrop: url("${skin}/buttons/clickbutton-hover-n.png");
	#endregion
		
}
ui|clickbutton.hover table.matrix td.s {
	#alphabackdrop: url("${skin}/buttons/vista/clickbutton-focus-s.png");
	#region default
		#alphabackdrop: url("${skin}/buttons/clickbutton-hover-s.png");
	#endregion
}
ui|clickbutton.hover table.matrix td.e {
	#alphabackdrop: url("${skin}/buttons/vista/clickbutton-focus-e.png");
	#region default
		#alphabackdrop: url("${skin}/buttons/clickbutton-hover-e.png");
	#endregion
}
ui|clickbutton.hover table.matrix td.w {
	#alphabackdrop: url("${skin}/buttons/vista/clickbutton-focus-w.png");
	#region default
		#alphabackdrop: url("${skin}/buttons/clickbutton-hover-w.png");
	#endregion
}
ui|clickbutton.hover table.matrix td.ne {
	#alphabackdrop: url("${skin}/buttons/vista/clickbutton-focus-ne.png");
	#region default
		#alphabackdrop: url("${skin}/buttons/clickbutton-hover-ne.png");
	#endregion
}
ui|clickbutton.hover table.matrix td.nw {
	#alphabackdrop: url("${skin}/buttons/vista/clickbutton-focus-nw.png");
	#region default
		#alphabackdrop: url("${skin}/buttons/clickbutton-hover-nw.png");
	#endregion
}
ui|clickbutton.hover table.matrix td.se {
	#alphabackdrop: url("${skin}/buttons/vista/clickbutton-focus-se.png");
	#region default
		#alphabackdrop: url("${skin}/buttons/clickbutton-hover-se.png");	
	#endregion
}
ui|clickbutton.hover table.matrix td.sw {
	#alphabackdrop: url("${skin}/buttons/vista/clickbutton-focus-sw.png");
	#region default
		#alphabackdrop: url("${skin}/buttons/clickbutton-hover-sw.png");
	#endregion
}


/* ACTIVE */

ui|clickbutton.active table.matrix td.c {
	#alphabackdrop: url("${skin}/buttons/clickbutton-active-c.png");
}
ui|clickbutton.active table.matrix td.n {
	#alphabackdrop: url("${skin}/buttons/clickbutton-active-n.png");
}
ui|clickbutton.active table.matrix td.s {
	#alphabackdrop: url("${skin}/buttons/clickbutton-active-s.png");
}
ui|clickbutton.active table.matrix td.e {
	#alphabackdrop: url("${skin}/buttons/clickbutton-active-e.png");
}
ui|clickbutton.active table.matrix td.w {
	#alphabackdrop: url("${skin}/buttons/clickbutton-active-w.png");
}
ui|clickbutton.active table.matrix td.ne {
	#alphabackdrop: url("${skin}/buttons/clickbutton-active-ne.png");
}
ui|clickbutton.active table.matrix td.nw {
	#alphabackdrop: url("${skin}/buttons/clickbutton-active-nw.png");
}
ui|clickbutton.active table.matrix td.se {
	#alphabackdrop: url("${skin}/buttons/clickbutton-active-se.png");
}
ui|clickbutton.active table.matrix td.sw {
	#alphabackdrop: url("${skin}/buttons/clickbutton-active-sw.png");
}


/* DEFAULT and DISABLED */

#region vista
	ui|clickbutton table.matrix,
	ui|clickbutton.isdisabled table.matrix {
		#alphabackdrop: url("${skin}/buttons/vista/clickbutton-default-backdrop.png");
		background-repeat: repeat-x;
		background-position: 0 50%;
	}
#endregion
#region osx
	ui|clickbutton table.matrix,
	ui|clickbutton.isdisabled table.matrix {
		#alphabackdrop: url("${skin}/buttons/vista/clickbutton-default-backdrop.png");
		background-repeat: repeat-x;
		background-position: 0 50%;
	}
#endregion

ui|clickbutton table.matrix td.c,
ui|clickbutton.isdisabled table.matrix td.c {
	/*
	#alphabackdrop: url("${skin}/buttons/clickbutton-default-c.png");
	#region vista
		filter: none;
		background-image: none;
	#endregion
	#region osx
		background-image: none;
	#endregion
	*/
	#region default
		#alphabackdrop: url("${skin}/buttons/clickbutton-default-c.png");
	#endregion
}
ui|clickbutton table.matrix td.n,
ui|clickbutton.isdisabled table.matrix td.n {
	#alphabackdrop: url("${skin}/buttons/vista/clickbutton-default-n.png");
	#region default
		#alphabackdrop: url("${skin}/buttons/clickbutton-default-n.png");
	#endregion
	
}
ui|clickbutton table.matrix td.s,
ui|clickbutton.isdisabled table.matrix td.s {
	#alphabackdrop: url("${skin}/buttons/vista/clickbutton-default-s.png");
	#region default
		#alphabackdrop: url("${skin}/buttons/clickbutton-default-s.png");	
	#endregion
}
ui|clickbutton table.matrix td.e,
ui|clickbutton.isdisabled table.matrix td.e {
	#alphabackdrop: url("${skin}/buttons/vista/clickbutton-default-e.png");
	#region default
		#alphabackdrop: url("${skin}/buttons/clickbutton-default-e.png");
	#endregion
}
ui|clickbutton table.matrix td.w,
ui|clickbutton.isdisabled table.matrix td.w {
	#alphabackdrop: url("${skin}/buttons/vista/clickbutton-default-w.png");
	#region default
		#alphabackdrop: url("${skin}/buttons/clickbutton-default-w.png");
	#endregion
}
ui|clickbutton table.matrix td.ne,
ui|clickbutton.isdisabled table.matrix td.ne {
	#alphabackdrop: url("${skin}/buttons/vista/clickbutton-default-ne.png");
	#region default
		#alphabackdrop: url("${skin}/buttons/clickbutton-default-ne.png");
	#endregion
}
ui|clickbutton table.matrix td.nw,
ui|clickbutton.isdisabled table.matrix td.nw {
	#alphabackdrop: url("${skin}/buttons/vista/clickbutton-default-nw.png");
	#region default
		#alphabackdrop: url("${skin}/buttons/vista/clickbutton-default-nw.png");
	#endregion
}
ui|clickbutton table.matrix td.se,
ui|clickbutton.isdisabled table.matrix td.se {
	#alphabackdrop: url("${skin}/buttons/vista/clickbutton-default-se.png");
	#region default
		#alphabackdrop: url("${skin}/buttons/clickbutton-default-se.png");	
	#endregion
}
ui|clickbutton table.matrix td.sw,
ui|clickbutton.isdisabled table.matrix td.sw {
	#alphabackdrop: url("${skin}/buttons/vista/clickbutton-default-sw.png");
	#region default
		#alphabackdrop: url("${skin}/buttons/clickbutton-default-sw.png");	
	#endregion
}


/* TOOLBAR CLICKBUTTONS ..............................................*/

ui|toolbar ui|clickbutton table.matrix td.c,
ui|toolbar ui|clickbutton.isdisabled table.matrix td.c {
	#alphabackdrop: url("${skin}/toolbars/toolbarbutton-c.png");
}
ui|toolbar ui|clickbutton table.matrix td.n,
ui|toolbar ui|clickbutton.isdisabled table.matrix td.n {
	#alphabackdrop: url("${skin}/toolbars/toolbarbutton-n.png");
}
ui|toolbar ui|clickbutton table.matrix td.s,
ui|toolbar ui|clickbutton.isdisabled table.matrix td.s {
	#alphabackdrop: url("${skin}/toolbars/toolbarbutton-s.png");
}
ui|toolbar ui|clickbutton table.matrix td.e,
ui|toolbar ui|clickbutton.isdisabled table.matrix td.e {
	#alphabackdrop: url("${skin}/toolbars/toolbarbutton-e.png");
}
ui|toolbar ui|clickbutton table.matrix td.w,
ui|toolbar ui|clickbutton.isdisabled table.matrix td.w {
	#alphabackdrop: url("${skin}/toolbars/toolbarbutton-w.png");
}
ui|toolbar ui|clickbutton table.matrix td.ne,
ui|toolbar ui|clickbutton.isdisabled table.matrix td.ne {
	#alphabackdrop: url("${skin}/toolbars/toolbarbutton-ne.png");
}
ui|toolbar ui|clickbutton table.matrix td.nw,
ui|toolbar ui|clickbutton.isdisabled table.matrix td.nw {
	#alphabackdrop: url("${skin}/toolbars/toolbarbutton-nw.png");
}
ui|toolbar ui|clickbutton table.matrix td.se,
ui|toolbar ui|clickbutton.isdisabled table.matrix td.se {
	#alphabackdrop: url("${skin}/toolbars/toolbarbutton-se.png");
}
ui|toolbar ui|clickbutton table.matrix td.sw,
ui|toolbar ui|clickbutton.isdisabled table.matrix td.sw {
	#alphabackdrop: url("${skin}/toolbars/toolbarbutton-sw.png");
}